<template>

  <div>
    <el-row :gutter="20" style="background-color: white">
      <el-col  :offset="0">
        <a href="#">首页</a> / 巡检管理 / 巡检点管理
      </el-col>
    </el-row><hr/>
    
    <el-row :gutter="20">
      <el-col :span="5" :offset="2" >
        <el-input placeholder="请输入巡检点编号" clearable v-model="id"></el-input>
      </el-col>
      <el-col :span="5" :offset="1">
         <el-select v-model="type" placeholder="请选择巡检类型">
            <el-option label="巡逻" value="巡逻">巡逻</el-option>
            <el-option label="站岗" value="站岗">站岗</el-option>
          </el-select>
      </el-col>
      <el-col :span="5" :offset="1">
        <el-input placeholder="请输入巡检点名称" v-model="inspection" clearable></el-input>
      </el-col>
      <el-col :span="2" :offset="0">
        <el-button type="primary" icon="el-icon-search" @click="findwhere()">搜索</el-button>
      </el-col>
    </el-row><hr/>

    <el-row :gutter="20">
      <el-col :span="4" :offset="0">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="dialogFormVisible = true"
          >添加</el-button
        >
        <el-button type="danger" icon="el-icon-delete">删除</el-button>
      </el-col>
    </el-row>

    <el-table :data="pagination.records" style="width: 100%" :default-sort = "{prop: 'parkinglot_id', order: 'descending'}" >
      <el-table-column prop="inspectionD" label="巡检点ID" width="180">
      </el-table-column>
      <el-table-column prop="tadmin.name" label="创建人" width="180">
      </el-table-column>
      <el-table-column prop="name" label="巡检点名称">
      </el-table-column>
      <el-table-column prop="type" label="巡检类型">
      </el-table-column>
        <el-table-column prop="position" label="巡检区域">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
                <el-button
                size="mini"
                @click="updateUI(scope.row)">编辑</el-button>
                <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="drop(scope.row)" >删除</el-button>
            </template>
      </el-table-column>
    </el-table>


    <!-- 分页 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-sizes="[3,5,8,10]"
        :page-size="pagination.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>



    <!-- 添加巡检点页面的弹出框 -->
    <el-dialog title="添加巡检点信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="绑定创建人" :label-width="formLabelWidth">
          <el-select
            v-model="form.adminId"
            placeholder="必填，请填写添加人"
            style="margin-right: 400px"
          >
            <el-option
              v-for="user in userlist"
              :key="user.adminId"
              :value="user.adminId"
              >{{ user.name }}</el-option
            >
          </el-select>
        </el-form-item>
         <el-form-item label="巡检点名称" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            placeholder="必填，请填写巡检点名称"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="巡检类型" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择巡检类型">
            <el-option label="巡逻" value="巡逻">巡逻</el-option>
            <el-option label="站岗" value="站岗">站岗</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巡检区域" :label-width="formLabelWidth">
          <el-input
            v-model="form.position"
            placeholder="请填写区域信息"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="esc">取 消</el-button>
        <el-button type="primary" @click="save"
          >保存</el-button
        >
      </div>
    </el-dialog>


    <!-- 修改停车场页面的弹出框 -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisibleupdate">
      <el-form>
         <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input
            v-model="pagination.adminname"
            autocomplete="off" disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="巡检点名称" :label-width="formLabelWidth">
          <el-input
            v-model="pagination.name"
            placeholder="必填，请填写巡检点名称"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="巡检类型" :label-width="formLabelWidth">
          <el-select v-model="pagination.type" placeholder="请选择巡检类型">
            <el-option label="巡逻" value="巡逻">巡逻</el-option>
            <el-option label="站岗" value="站岗">站岗</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巡检区域" :label-width="formLabelWidth">
          <el-input
            v-model="pagination.position"
            placeholder="请填写区域信息"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="escupdate">取 消</el-button>
        <el-button type="primary" @click="updateKeep">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
        id:'',
        type:'',
        inspection:'',
      pagination: [],
      paginationupdate: [],
      userlist:[],
      dialogFormVisible: false,
      dialogFormVisibleupdate: false,
      dialogVisible: false,
      form: {
        inspectionD: 1,
        adminId: '',
        name: '',
        type:'',
        position:''
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    
    //分页查询巡检点信息
    find(page = 1, pageSize = 5) {
      this.id="";this.type="";this.inspection="";
      let url = "/leanyuan/Inspection/FindAllInspection?pageno=" + page + "&pagesize=" + pageSize;
  
      this.$axios.get(url).then((resp) => {

          console.log(resp.data);
          this.pagination=resp.data;

        }).catch((ex) => {});
    },
     finduser(page = 1, pageSize = 5) {
      let url = "/leanyuan/TAdmin/FindAllTAdmin";
      this.$axios.get(url).then((resp) => {

          console.log(resp.data);
          this.userlist=resp.data;

        }).catch((ex) => {});
    },
    findwhere(pageno = 1, pageSize = 5){
        let url = "/leanyuan/Inspection/FindAllInspection1?id=" + this.id + "&type=" + this.type+"&inspection=" + this.inspection+"&pageno=" + pageno + "&pagesize=" + pageSize;
      this.$axios.get(url).then((resp) => {

          console.log(resp.data);
          this.pagination=resp.data;

        }).catch((ex) => {});
    },
     save() {
       this.form.inspectionD=1;
       console.log(this.form);
       let data=this.form;
       console.log(data);
      let url = "/leanyuan/Inspection/SaveInspection";
      this.$axios.post(url,data).then((resp) => {
          if(resp.data="添加成功"){
            this.dialogFormVisible=false;
             this.find();
          }else{
            alert("信息已存在");
          }
          console.log(resp.data);
        }).catch((ex) => {});
        this.form={
        inspectionD: "",
        adminId: "",
        name: "",
        type:'',
        position:''
      };
    },
    drop(row){
         console.log(row.inspectionD);
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示',
                            { type: 'warning' })                        
                        .then(() => {
                          let url = "/leanyuan/Inspection/DeleteInspection?id="+row.inspectionD;
                 this.$axios.post(url).then((resp) => {
          
                        console.log(resp.data);

                               }).catch((ex) => {});
                            //调用服务端的处理，然后再给出成功提示
                             this.$message({type: 'success', message: row.uid+',删除成功!'});
                             this.find();
                        }); 
                          this.find();

    },

    updateUI(row) {
      this.dialogFormVisibleupdate = true;
      this.pagination = row;
      console.log(row)
    },

    updateKeep(){
       let url = "/leanyuan/Inspection/UpdateInspection";
      this.$axios
        .post(url, this.pagination)
        .then((resp) => {
          console.log(resp);
          if (resp.data) {
            this.dialogFormVisibleupdate = false;
            this.dialogVisible = false;
            this.parkinglot = {};
            this.find();
          } else {
            this.dialogVisible = true;
          }
        })
        .catch((ex) => {});
    },
    esc(){
      this.dialogFormVisible=false;
    this.form={};
    },
     escupdate(){
      this.dialogFormVisibleupdate=false;
      this.find();
    },
     //每页显示的记录数发生改变，查询
    handleSizeChange(pageSize){
      this.find(this.pagination.current,pageSize);
    },
    //当前页面发生改变，查询
    handleCurrentChange(page){
      this.find(page,this.pagination.size);
    },
  },
  mounted() {
      this.find();
       this.finduser();
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 24px;
}
.el-container {
  margin-top: -58px;
  height: 100%;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
#div1 {
  height: 150px;
  width: 100px;
  background-color: red;
  margin-left: 210px;
}
</style>